<template>
  <div class="dashboard-main">
    <ul class="dashboard-title">
      <li v-for="(item,key) in dashboardTitleProp" :key="key" @click="dashboardTitleClick(item.titleName)">
        <svg-icon
            :style="{color:item.svgColor}"
            :icon-class="item.svgName"
            @mouseenter="changeActive($event,item.svgColor)"
            @mouseleave="removeActive($event,item.svgColor)"
        />
        <div>
          <label>{{ item.label }}</label>
          <span>{{ item.num }}</span>
        </div>
      </li>
    </ul>
    <!--图表-->
    <!--折现图-->

    <ul class="dashboard-chart">
      <!--钢瓶数量占比统计-->
      <li id="chartId1" style="width:calc(50% - 40px);height: 400px"></li>
      <!--保证金收入统计-->
      <li id="chartId2" style="width:calc(50% - 40px);height: 400px"></li>
      <!--钢瓶报废统计-->
      <li id="chartId3" style="width:calc(50% - 40px);height: 400px"></li>
      <!--钢瓶年检统计-->
      <li id="chartId4" style="width:calc(50% - 40px);height: 400px"></li>

    </ul>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {},
  props: [],
  data() {
    return {
      //title 数据源
      dashboardTitleProp: [
        {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日租赁订单数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日退瓶订单数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '本月年检到期瓶数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日报废到期瓶数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日补瓶数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日收瓶数',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日保证金收入',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日退瓶结算租金',
          num: '',
        }, {
          titleName: 'oneClick11',//点击方法获取的属性
          svgName: 'chart',
          svgClass: '',
          svgColor: '#36a3f7',
          label: '今日退瓶结算退款',
          num: '',
        }
      ],

      gangPingData: [],//钢瓶数量占比统计


      baozhengjinX: [],// 保证金收入统计X
      baozhengjinData: [],// 保证金收入统计

      baofeiX: [],//钢瓶报废统计X
      baofeiXData: [],//钢瓶报废统计


      nianJianDataX: [],//钢瓶年检统计X
      nianJianData: [],//钢瓶年检统计


    };
  },
  mounted() {
    this.initData();

  },
  methods: {
    initData() {
      this.$a73().then((result) => {
        this.dashboardTitleProp[0].num = result.indexParam.todayOrderCount;//今日租赁订单数
        this.dashboardTitleProp[1].num = result.indexParam.todayReturn;//今日退瓶订单数
        this.dashboardTitleProp[2].num = result.indexParam.nianjian;//本月年检到期瓶数
        this.dashboardTitleProp[3].num = result.indexParam.baofei;//今日报废到期瓶数
        this.dashboardTitleProp[4].num = result.indexParam.buping;//今日补瓶数
        this.dashboardTitleProp[5].num = result.indexParam.shouping;//今日收瓶数
        this.dashboardTitleProp[6].num = result.indexParam.todayMoneyIn;//今日保证金收入
        this.dashboardTitleProp[7].num = result.indexParam.todayReturnOut;//今日退瓶结算租金
        this.dashboardTitleProp[8].num = result.indexParam.todayReturnRentOut;//今日退瓶结算退款
        // 钢瓶数量占比统计
        this.gangPingData = result.gangPing.map(item => ({
          name: item.category_name,
          value: item.number
        }));
        //保证金收入统计
        for (let i = 0; i < result.depositPriceChart.length; i++) {
          this.baozhengjinX.push(this.Utils.timeDate(result.depositPriceChart[i].created_at));
          this.baozhengjinData.push(result.depositPriceChart[i].all_price);
        }
        // 钢瓶报废统计
        for (let i = 0; i < result.baoFei.length; i++) {
          this.baofeiX.push(result.baoFei[i].date);
          this.baofeiXData.push(result.baoFei[i].number);
        }

        //钢瓶年检统计
        for (let i = 0; i < result.nianJian.length; i++) {
          this.nianJianDataX.push(result.nianJian[i].date);
          this.nianJianData.push(result.nianJian[i].number);
        }

        // this.lineChart();
        // this.pieChart();
        // this.barChart();
        // this.barChart1();
        this.chart1();
        this.chart2();
        this.chart3();
        this.chart4();
      })
    },
    //
    // 钢瓶数量占比统计
    chart1() {
      let chartDom = document.getElementById('chartId1');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '钢瓶数量占比统计',
          left: 'left'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '钢瓶数量占比统计',
            type: 'pie',
            radius: [50, 120],
            center: ['50%', '42%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.gangPingData,
          }
        ]
      };
      option && myChart.setOption(option);
    },

    //保证金收入统计
    chart2() {
      let chartDom = document.getElementById('chartId2');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '保证金收入统计',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.baozhengjinX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.baozhengjinData,
            barWidth: 20,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //钢瓶报废统计
    chart3(){
      let chartDom = document.getElementById('chartId3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '钢瓶报废统计',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.baofeiX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.baofeiXData,
            type: 'line',
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);
    },

    //钢瓶年检统计
    chart4(){
      let chartDom = document.getElementById('chartId4');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '钢瓶年检统计',
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.nianJianDataX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.nianJianData,
            type: 'line',
            smooth: true
          }
        ]
      };

      option && myChart.setOption(option);
    }


  },
};
</script>
<style>
/*给图表组件添加class class通过路由/变成-来组合*/
.-dashboard-index {
  background: rgb(240, 242, 245) !important;
}
</style>
<style lang="scss" scoped>
.dashboard-title {
  @include flex(wrap);

  li {
    cursor: pointer;
    @include flex(nowrap, space-between);
    width: calc(20% - 48px);
    margin: 0 10px 20px;
    padding: 14px;
    background: #fff;
    border-radius: 5px;

    > span {
      border-radius: 5px;
    }

    svg {
      width: 48px;
      height: 48px;
      padding: 16px;
      border-radius: 5px;
    }

    > div {
      @include flex(nowrap, flex-end, center, column);

      label {
        font: {
          size: 16px;
          weight: bold;
        };
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 8px;
      }

      span {
        font: {
          size: 20px;
          weight: bold;
        };
      }
    }
  }
}

.dashboard-chart {
  @include flex(wrap);

  li {
    padding: 10px;
    margin: 10px;
    background: #fff;
    border-radius: 8px;
  }
}
</style>
